<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <meta name="cdnload" content="vue,nzh" />
    <title>172-算盘表示数字</title>
    <style>
      .content {
        display: flex;
        align-items: center;
      }
      .item_max {
        width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .box {
        border: 1px solid #999;
      }
      .box > div {
        width: 30px;
        height: 20px;
        border-radius: 10px;
        background-color: #252525;
        margin: 5px 0;
        transition: 0.3s;
      }

      .top {
        height: 90px;
      }
      .top .active {
        margin-top: 30px;
        transition: 0.3s;
      }
      .down {
        height: 180px;
        display: flex;
        flex-direction: column-reverse;
      }
      .down .active {
        margin-bottom: 30px;
        transition: 0.3s;
      }
    </style>
  </head>

  <body>
    <template id="strand">
      <div class="item_max">
        <div class="box top">
          <div v-for="t in 2" :key="t" :class="{ active: 3 - t == state.top }"></div>
        </div>
        -
        <div class="box down">
          <div v-for="d in 5" :key="d" :class="{ active: 6 - d == state.down }"></div>
        </div>
        {{ unitStr }}
      </div>
    </template>

    <div id="app">
      <input type="number" v-model="count" :min="0" />
      <p>{{ countStr }}</p>
      <div class="content">
        <strand v-for="(p, i) in countList" :key="i" :num="p" :unit="countList.length - 1 - i"></strand>
      </div>
    </div>

    <script type="module" src="./172-main.js"></script>
  </body>
</html>
